<template>
    <div class="scheme_box">
        <div class="header item_row flex-row">
            <span class="flex-item">区域中心</span>
            <span class="flex-item">作业路段</span>
            <span class="flex-item">项目类型</span>
            <span class="flex-item">施工状态</span>
        </div>
        <router-link :to="{path:'/supervision/list/index',query:{id:item.id}}" class="content_item item_row flex-row" v-for="item in list" :key="item.id">
            <span class="flex-item">
                <a-tooltip placement="top">
                    <template slot="title">
                    <span>{{item.projectDep}}</span>
                    </template>
                    {{item.projectDep}}
                </a-tooltip>
            </span>
            <span class="flex-item">
                <a-tooltip placement="top">
                    <template slot="title">
                    <span>{{item.workingSection}}</span>
                    </template>
                    {{item.workingSection}}
                </a-tooltip>
            </span>
            <span class="flex-item">
                <a-tooltip placement="top">
                    <template slot="title">
                    <span>{{item.projectType}}</span>
                    </template>
                    {{item.projectType}}
                </a-tooltip>
            </span>
            <span class="flex-item">
                <a-tooltip placement="top">
                    <template slot="title">
                    <span>{{item.workingStatus}}</span>
                    </template>
                    <list-status :data="rectifyStatus" :value="item.workingStatus" type="label" />
                </a-tooltip>
            </span>
        </router-link>
    </div>
</template>
<script>
import {remoteList} from '@/api/supervision/manage';
import { rectifyStatus } from '@/views/supervision/dictionary';
import { hasPermPage } from '@/utils/permission';
export default {
    name:"SchemeList",
    data(){
        return{
            rectifyStatus,
            list:[]
        }
    },
    created(){
        this.getList();
    },
    methods:{
        //跳转施工列表
        goSupervision(info){
            let ishas = hasPermPage('/supervision/list/index');
            if(!ishas){
                this.$router.push({
                    path:`/supervision/list/index`,
                    params:{
                        id:info.id
                    }
                })
            }else{
                this.$message.error('暂无权限')
            }
        },
        async getList(){
            try{
                let res = await remoteList({
                    page:1,
                    size:4
                });
                let {list} = res.data;
                this.list = list;
            }finally{

            }
        }
    }
}
</script>
<style lang="scss" scoped>
.scheme_box{
    margin-top: 20px;
    font-size: 12px;
    border: 1px solid rgba($color: #D9D9D9, $alpha: .3);
    .header{
        color: #17E2EF;
        background: #0B265B;
    }
    .item_row{
        padding: 8px 0;
        .flex-item{
            padding: 0 5px;
            box-sizing: border-box;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
    .content_item{
        height: 4vh;
        align-items: center;
        border-top: 1px solid rgba($color: #D9D9D9, $alpha: .3);
        color: #fff;
        background: rgba($color: #1A80DC, $alpha: .6);
        cursor: pointer;
    }
}
</style>